<script setup lang="ts">

</script>

<template>
    <div>
        <div class="MyMessege" v-for="num in 10" :key="num">
            <div>
                <img src="../images/mymessege.png" height='25px'>
            </div>
            <div class="MyDetaile">
                <div>
                    <p class="company"><span>张莉/河北丰通网络科技有限公司1111111111</span>
                        <img src="../images/下一步.png" height="12px" width="10px">
                    </p>
                </div>
                <div class="MyInformation">
                    <p>张莉</p>
                    <p>15833738905</p>
                    <p>2024/04/23 14:59</p>
                </div>
            </div>
        </div>
        <p class="bottom">没有更多数据了~</p>
    </div>
</template>

<style scoped lang="less">
.MyMessege {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  margin: 10px 10px 0 10px;
  border-radius: 10px;

  .MyDetaile {
    width: 90%;
    .company {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-weight: 600;
        width: 80%;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
      }
    }
  }
}

.MyInformation {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
  color: gray;
}

.bottom {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  padding-bottom: 10px;
}
</style>